<template>
    <div>
  <van-swipe @change="onChange" class="swipe">
  <van-swipe-item>
      <img src="../assets/1.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
      <img src="../assets/2.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
      <img src="../assets/3.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
  <template #indicator>
    <div class="custom-indicator">{{ current + 1 }}/4</div>
  </template>
</van-swipe>
    </div>


</template>
<script>
export default {
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>
<style scoped>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }

  .swipe img{
      width: 100%;
  }
  .swipe{
      height: 100px;
      text-align: center;
  }

</style>